﻿<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>jQuery滑动的应用</title>
        <script src="js/jquery-1.12.4.js"></script>
        <style>
            div { border: 1px solid; padding: 20px 50px;
                display: none; width: 300px; }
        </style>
    </head>
    <body>
        <h3>jQuery滑动的应用</h3>
        <hr>
        <div>
            <h3>jQuery技术</h3>
            <ul>
                <li>jQuery基础</li>
                <li>jQuery选择器</li>
                <li>jQuery过滤器</li>
                <li>jQuery事件</li>
                <li>jQuery效果</li>
            </ul>
        </div>
        <br>
        <button id="btn01" type="button">投影幕下降</button>
        <button id="btn02" type="button">投影幕上升</button>
        <script>
            $(document).ready(function() {
                //投影幕下降
                $("#btn01").click(function() {
                    $("div").slideDown(5000);
                });
                //投影幕上升
                $("#btn02").click(function() {
                    $("div").slideUp(5000);
                });
            });
        </script>
    </body>
</html>